<template>
  <div v-cloak>
    <Meta pagealias="schoollist" />
    <div class="bg">
      <Head>院校</Head>
      <div class="box_1">
        <div class="content" @click="toggleSearch">
          <div class="search_ico">
            {{ params.keyword === "" ? "请输入关键字" : params.keyword }}
          </div>
        </div>
      </div>
      <van-popup v-model="show" position="top" :style="{ height: '90%' }">
        <TopSearch type="campus" @hideSearch="toggleSearch"  @doSearch="doSearchByKeyword"></TopSearch>
      </van-popup>
      <van-dropdown-menu>
        <van-dropdown-item :title='levelTitle' v-model="params.level" :options="schoolLevelData" @change="searchByLevel"/>
        <van-dropdown-item :title='districtTitle'  ref="dropDistrict" :lock-scroll="false" @opened="openedDistrict" @closed="closedDistrict">
          <DistrictFilter :districts="[params.district1, params.district2, params.district3]" :type="true" @doSearch="doSearchByDistrict"></DistrictFilter>
        </van-dropdown-item>
        <van-dropdown-item :title='typeTitle' v-model="params.type" :options="schoolTypeData" @change="searchByType"/>
      </van-dropdown-menu>
      <van-empty image="search" description="没有找到对应的数据" style="background-color:#fff" v-if="show_empty === true"/>
      <van-list v-if="dataset.length > 0" @load="onLoad" v-model="loading" :finished="finished" :finished-text="finishedText" :immediate-check="false" >
        <div class="school_meeting">
          <div class="school_meeting_list">
            <div class="school_item" v-for="(item) in dataset" :key="item.id"  @click="$router.push('/campus/school/' +  item.id)">
              <div class="school_info">
                <a class="school_name substring">{{item.name}}</a>
                <p class="oth_list substring">
                  <span class="oth_item">{{item.type_cn}}</span>
                  <span class="oth_item">{{item.level_cn}}</span>
                </p>
                <p class="school_city substring">{{item.district_cn}}</p>
                <p class="school_meeting_num substring">
                  近期有<span class="color">{{item.preach_count}}</span>场宣讲会，
                  <span class="color">{{item.election_count}}</span> 场双选会
                </p>
              </div>
              <div class="school_img">
                <img :src="item.logo_url" alt="" />
              </div>
            </div>
          </div>
        </div>
      </van-list>
      <div class="height" v-if="dataset.length >= 3"></div>
    </div>
    <BottomNav />
  </div>
</template>
<script>
import http from '@/utils/http.js'
import api from '@/api.js'
import BottomNav from '../components/BottomNav.vue'
import FilterOption from '../components/filterOption.vue'
import DistrictFilter from '@/components/DistrictFilter.vue'
import { obj2Param } from '@/utils/index'
export default {
  components: {
    BottomNav,
    FilterOption,
    DistrictFilter
  },
  data () {
    return {
      show: false,
      show_empty: false,
      schoolLevelData: [],
      levelTitle: '院校层次',
      districtTitle: '所在地区',
      typeTitle: '院校类型',
      schoolTypeData: [],
      params: {
        keyword: '',
        district1: '',
        district2: '',
        district3: '',
        level: '',
        type: ''
      },
      page: 1, // 上拉加载页码数
      pagesize: 10, // 上拉加载总条数
      dataset: [], // 列表数据
      loading: false, // 上拉加载状态
      finished: false, // 是否加载完成
      finishedText: '' // 加载完成后提示文字
    }
  },
  watch: {
    $route (to, from) {
      if (from.name !== 'campusSchoolShow' && to.name === 'campusSchool') {
        this.fetchData(true)
        this.initQuery(to.query)
        this.restoreFilter()
      }
    }
  },
  mounted () {
    this.fetchData(true)
    this.getSchoolLevel()
    this.getSchoolType()
  },
  created () {
    this.$store.dispatch('getClassify', 'citycategory')
    this.initQuery(this.$route.query)
    this.restoreFilter()
  },
  methods: {
    toggleSearch () {
      this.show = !this.show
    },
    // 获取数据
    fetchData (init) {
      this.show_empty = false
      let conditions = {...this.params}
      if (init === true) {
        this.page = 1
        this.finishedText = ''
        this.finished = false
      }
      conditions.page = this.page
      conditions.pagesize = this.pagesize
      http.get(api.school_list, conditions).then((res) => {
        if (init === true) {
          this.dataset = [...res.data.items]
        } else {
          this.dataset = this.dataset.concat(res.data.items)
        }
        // 加载状态结束
        this.loading = false
        if (res.data.items.length < this.pagesize) {
          this.finished = true
          if (init === false) {
            this.finishedText = '没有更多了'
          } else if (res.data.items.length === 0) {
            this.show_empty = true
          }
        }
      }).catch(() => {})
    },
    // 上拉加载
    onLoad () {
      this.page++
      this.fetchData(false)
    },
    // 地区筛选
    doSearchByDistrict (data) {
      this.doSearch({
        district1: data.district1,
        district2: data.district2,
        district3: data.district3
      })
      this.districtTitle = data.districtName
      this.$refs.dropDistrict.toggle()
    },
    // 获取院校层次
    getSchoolLevel () {
      http.get(api.get_level_category).then((res) => {
        this.schoolLevelData = this.restructureSchoolLevel(res.data)
        this.restoreSchoolLevel()
      })
    },
    // 获取院校类型
    getSchoolType () {
      http.get(api.get_type_category).then((res) => {
        this.schoolTypeData = this.restructureSchoolLevel(res.data)
        this.restoreType()
      })
    },
    // 院校层次筛选
    searchByLevel (value) {
      if (value) {
        let currentSchool = this.schoolLevelData.filter((v) => {
          return v.value === value
        })[0]
        this.levelTitle = currentSchool.text
      } else {
        this.levelTitle = '院校层次'
      }
      this.doSearch({ level: value })
    },
    // 院校类型筛选
    searchByType (value) {
      if (value) {
        let currentType = this.schoolTypeData.filter((v) => {
          return parseInt(v.value) === parseInt(value)
        })[0]
        this.typeTitle = currentType.text
      } else {
        this.typeTitle = '院校类型'
      }
      this.doSearch({ type: value })
    },
    // 恢复院校层次筛选
    restoreSchoolLevel () {
      let queryData = this.$route.query
      if (queryData['level']) {
        this.params.level = queryData['level']
        let currentSchoolName = this.schoolLevelData.filter((v) => {
          return parseInt(v.value) === parseInt(queryData['level'])
        })[0]
        this.levelTitle = currentSchoolName.text
      }
    },
    // 恢复院校类型筛选
    restoreType () {
      let queryData = this.$route.query
      if (queryData['type']) {
        this.params.type = queryData['type']
        let currentType = this.schoolTypeData.filter((v) => {
          return parseInt(v.value) === parseInt(queryData['type'])
        })[0]
        this.typeTitle = currentType.text
      }
    },
    // 恢复地区筛选
    restoreDistrict () {
      let queryData = this.$route.query
      if (queryData['district1']) {
        this.params.district1 = queryData['district1']
        this.params.district2 = queryData['district2']
        this.params.district3 = queryData['district3']
        let storeCity = this.$store.state.classifyCityOriginal
        let selectText = []
        let topItem = storeCity.filter((v) => {
          return parseInt(v.value) === parseInt(this.params.district1)
        })[0]
        selectText.push(topItem.label)
        if (topItem.children.length) {
          if (parseInt(this.params.district2)) {
            let secondItem = topItem.children.filter((v) => {
              return parseInt(v.value) === parseInt(this.params.district2)
            })[0]
            selectText.push(secondItem.label)
            if (secondItem.children.length) {
              if (parseInt(this.params.district3)) {
                let lowestItem = secondItem.children.filter((v) => {
                  return parseInt(v.value) === parseInt(this.params.district3)
                })[0]
                selectText.push(lowestItem.label)
              } else {
                selectText.push(`全${selectText[selectText.length - 1]}`)
              }
            }
          } else {
            selectText.push(`全${selectText[selectText.length - 1]}`)
          }
        }
        this.districtTitle = selectText[selectText.length - 1]
      } else {
        this.params.district1 = ''
        this.params.district2 = ''
        this.params.district3 = ''
        this.districtTitle = '所在地区'
      }
    },
    // 恢复筛选
    restoreFilter () {
      this.restoreDistrict()
    },
    // 重构院校层次院校类型数据
    restructureSchoolLevel (data) {
      var restructureData = []
      for (const key in data) {
        restructureData.push({ text: data[key], value: key })
      }
      if (restructureData[0].text != '全部') {
        restructureData.unshift({ text: '全部', value: '' })
      }
      return restructureData
    },
    // 筛选搜索
    doSearch (data) {
      for (const key in data) {
        if (this.params.hasOwnProperty(key)) {
          this.params[key] = data[key]
        }
      }
      this.page = 1
      this.$router.push('/campus/school' + obj2Param(this.params, '?'))
    },
    // 关键字搜索
    doSearchByKeyword (data) {
      for (const key in this.params) {
        this.params[key] = ''
      }
      this.params.keyword = data.keyword
      this.page = 1
      this.$router.push('/campus/school' + obj2Param(this.params, '?'))
    },
    // 地区筛选打开之后给筛选组件赋值
    openedDistrict () {
      this.$refs.dropDistrict.$children[0].$children[0].initData()
      setTimeout(() => {
        this.setComponentAttribute(this.$refs.dropDistrict)
      }, 300)
    },
    closedDistrict () {
      this.$refs.dropDistrict.$children[0].$children[0].handleCityOverlay()
    },
    // 设置地区筛选组件高度
    setComponentAttribute (component) {
      if (component.$children[0]) {
        let thisHeight = component.$children[0].$el.clientHeight
        component.$children[0].$children[0].layHeight = thisHeight
        let offTop = component.$el.offsetTop
        component.$children[0].$children[0].offTop = parseInt(parseInt(offTop) + parseInt(thisHeight) / 2)
      }
    },
    initQuery (query) {
      for (const key in this.params) {
        if (query.hasOwnProperty(key)) {
          this.params[key] = query[key]
        } else {
          this.params[key] = ''
        }
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.box_1 {
  .content {
    .search_ico {
      font-size: 12px;
      color: #c9c9c9;
      padding: 10px 0 10px 23px;
      background: url("../../../assets/images/search_ico_gray.svg") 0 center no-repeat;
      background-size: 15px;
      position: absolute;
      top:0;
      left:50%;transform:translate(-50%,0);line-height: normal;
      &.has {
        color: #333;
      }
    }
    position: relative;
    width: 340px;
    height: 37px;
    margin: 0 auto;
    background-color: #f8f8f8;
    text-align: center;
    border-radius: 36px;
  }
  width: 100%;
  background-color: #ffffff;
  padding: 11px 0;
}

.height{
  height:53px;
}
.height2 {
  height: 25px;
}
.van-list{
  background:#f6f9fc;
}
.school_meeting{
  min-height: 450px;
  margin: 0 8px 0 9px;
}
.school_meeting .school_meeting_list{
  padding: 10px 0 1px ;
}

.school_meeting_list .school_item{
  height:138px;
  background-color: #fff;
  border-radius: 5px;
  padding: 17.5px 18px 22.5px 19px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 9.5px;
}

 .school_item .school_info{
  width: 245px;
}

.school_item .school_info .school_name{
  color:#333333 ;
  font-size: 16px;
  display: block;
  margin-bottom: 10px;
}

.school_item .school_info .oth_list{
  color:#444444;
  font-size: 0;
  margin-bottom: 7.5px;
}

.school_item .school_info .oth_list .oth_item{
  font-size: 14px;
  margin-right: 16.5px;
  position: relative;
}

.school_item .school_info .oth_list .oth_item::after{
  content:'';
  width: 1px;
  height: 10.5px;
  background-color: #cacaca;
  position: absolute;
  right: -8.5px;
  top: 50%;
  transform: translateY(-50%);
}
.school_item .school_info .oth_list .oth_item:last-child:after{
  display: none;
}

.school_item .school_info .school_city{
  color:#999999 ;
  font-size: 13px;
  margin-bottom: 7.5px;
}

.school_item .school_info .school_meeting_num{
  color:#999999 ;
  font-size: 13px;
}

.school_item .school_info .school_meeting_num .color{
  color:#23c887 ;
}

.school_item .school_img{
  width: 51.5px;
  height: 51.5px;
}
.school_item .school_img img{
  width: 100%;
  height: 100%;
}
</style>
